<script setup>
import { onMounted, ref } from 'vue'
const props = defineProps({
  msg: String,
  'picIndex':{
  	type:[Number,String],
  	default:1
  }
})

const count = ref(0)
const canvasRef = ref()
const datalist = ref([
	1,2,3,4,5,6,7,8,9,10
])

onMounted(()=>{
	// 创建场景、相机和渲染器，启用抗锯齿
		        const scene = new THREE.Scene();
		        const camera = new THREE.PerspectiveCamera(50, 1, 0.2, 1000);
		
		        const renderer = new THREE.WebGLRenderer({ antialias: true });
			
		        renderer.setSize(50, 50);
		
		        canvasRef.value.appendChild(renderer.domElement);
			
		        // 创建几何体、纹理和材质
		        const geometry = new THREE.SphereGeometry(2, 42, 42); // 增加分段数以减少锯齿
		        const textureLoader = new THREE.TextureLoader();
				let bead 
				let imgUrL = new URL(`/src/assets/1080/${props.picIndex}.jpg`, import.meta.url).href
				console.log("imgUrL",imgUrL,import.meta)
				const texture = textureLoader.load(imgUrL, function (texture) {
				    texture.wrapS = THREE.RepeatWrapping;
				    texture.wrapT = THREE.RepeatWrapping;
				    texture.repeat.set(2, 1);
				});
				let material = new THREE.MeshBasicMaterial({ map: texture });
			    // material.color.set(255,255,1);
				  bead =new THREE.Mesh(geometry, material);
	
				scene.add(bead);

		      	camera.position.y = 0
		        camera.position.z = 5;
				
					
				// 动画函数
				function animate() {
				    // requestAnimationFrame(animate);
				    // bead.rotation.y += 0.01; // 设置旋转速度
			
				    renderer.render(scene, camera);

				}
				animate();
				// 响应式设计
				// window.addEventListener('resize', () => {
				//     camera.aspect = window.innerWidth / window.innerHeight;
				//     camera.updateProjectionMatrix();
				//     renderer.setSize(50, 50);
				// });
			})
	
	       
</script>

<template>
    <div class="canvas " ref="canvasRef">
	</div>

</template>

<style scoped>
.canvas{
	border-radius: 50%;
	overflow: hidden;
}
</style>
